<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

  <link href="Styles/connect.css" rel="stylesheet" type="text/css">
  
  <script type="text/javascript" src="Js/jquery.min.js" ></script>
  
  <!-- 字体特效插件 -->
  <script type="text/javascript" src="Js/fonts/l-by-l.min.js"></script>
  
  <!-- easyui -->
  <script type="text/javascript" src="Js/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="Js/easyui/locale/easyui-lang-zh_CN.js"></script>
  <link rel="stylesheet" type="text/css" href="Js/easyui/themes/icon.css">
  <link id="themeLink" rel="stylesheet" type="text/css" href="Js/easyui/themes/default/easyui.css">
  
  <style type="text/css">
  	
  	.one{
	
		float:right;
		width: 100px;
		height: 30px;
		margin-right:20px;
		line-height: 30px;
		text-align: center;
		cursor: pointer;
	}

.one i{
		display:inline-block;
		width:20px;
		height:20px;
		vertical-align:middle;
		background:url(Images/zan.png);
	}
.one.two i{
		display:inline-block;
		width:20px;
		height:20px;

		vertical-align:middle;
		background:url(Images/zan.png);
		background:url(Images/zan_h.png);	
	}
	 
.one b{
		vertical-align:middle;
	}
  	
  </style>
  
  
  <script type="text/javascript">
   $(function(){
		$('.one ').click(function(){
		if( $(this).attr('data-key')=="on"){
			$(this).addClass('two');
			var num = Number($(this).find('b').html());
				//alert(typeof num);
			$(this).find('b').html(num+1);
			$(this).attr("data-key","");
		}else{
			$(this).removeClass('two');
			var numb = Number($(this).find('b').html());
			$(this).find('b').html(numb-1);
			$(this).attr("data-key","on");
		}
		
		
	})	 
			
}) 
  </script>
  
</head>

<body>
    <div class="main">
        <!--头部-->
        <div class="top">
            <!--left-->
            <div class="top_left">
                <div class="tu_1">
                    <img src="Images/4.png"/>
                </div>
                <div class="word_1">
                    <span><strong>Lmyau's</strong></span>
                    <span><strong>Blog</strong></span>
                </div>
            </div>

            <!--middle-->
            <div class="top_middle">
                <ul>
                    <li><a href="index">博客</a></li>
                    <li><a href="aboutme">关于我</a></li>
                    <li><a href="connect">和我联系</a></li>
                </ul>
            </div>
        </div>
        <!--主体部分-->
        <div class="tail">
            <div class="tail_content">
				
				
				<!--主体左边部分开始 -->
                <div class="tail_left">
                  	
                  	<div ><span class="tit">留个言再走吧~~</span></div>
                  	
                  	<!-- 留言区 -->
					<div class="liuyan">
					 <form action="comment">
					   <textarea name="comments" class="ly_main easyui-validatebox" placeholder="请输入留言内容" required="true" missingMessage="留言不能为空"></textarea>
				   		<div>
				   			<span class="nickname">你的昵称：</span>
				   			<input class="nickname2 easyui-validatebox" type="text" name="name" placeholder="请输入昵称"  required="true" missingMessage="昵称不能为空"/>
					   		<input type="submit" value="发布评论" class="btntn"></input>
				   		</div>
					  </form>
					</div>
                 
                 <c:forEach items="${lys}" var="liuyan">
                 
                  	<!-- 所有留言 -->
                  	<div class="allcommon">
						
						
                  		<div class="cinfo">
                  			<b class="cname">${liuyan.name}</b>
                  			<b class="ctime"><fmt:formatDate value="${liuyan.created }" pattern="yyyy-MM-dd HH:mm:ss"/> </b>
                  		</div>
                  		
                  		<div class="cmain">
                  			${liuyan.content }
                  		</div>
                  		
						<span class="<c:out value='id${liuyan.id} ids'></c:out>" style="display: none">${liuyan.id}</span>
						
                  		<div class="cfunc">
                  			<div class="one create" data-key="on">
                  				<i></i>
            					<b>${liuyan.zan}</b>
	   							<%-- <span class='<c:out value="id${liuyan.id} ids"></c:out>' style="display: none">${liuyan.id}</span> --%>
	   							<%-- <input class='<c:out value="id${liuyan.id}"></c:out>' value="${liuyan.id}" style="display: none;"> --%>
                  			</div>
                  			<div class="hui">回复</div>
						    
                  		</div>
                  	</div>
                 </c:forEach>
                  	
                </div>
                <!--主体左边部分结束-->
            </div>
        </div>
    	
    	<div class="read_more">
    		<a href="javascript:void(0)">查看更多</a>
    	</div>
    	<div class="read_more"> </div>
    	<!-- 页脚 -->
   		<div class="footers">
    		<span>&copy; 2018 Lmyau's Blog 版权所有 网站备案号: 豫A111111111</span>
    	</div>
    </div>

</body>


<script>
	
	
	//点赞功能交互
	var i = 1;
	$('.create').click(function(){
		
		//对2取模
		i = i +1;
		var type = i % 2; 
		
		//得到当前点击的id，并将其传给后台
		//alert($(this).parent().prev('span').text());
		var id = $(this).parent().prev('span').text();
		
		$.post("praise",{id:id,type:type},function(data){
			if(data.status==0){
				alert("ojbk");
			}else{
				alert("gg");
			}
		});
		
	});
	
	
	//查看更多功能交互
	
	//点击加载更多时，动态改变页面的高度。
	$('.read_more a').click(function(){
		
		var tail = $('.tail');
		//alert(tail.height());
		
		//每次点击增加2个
		tail.height(tail.height() + 360 );
		
		
	/* 	$.get("index",{page:page},function(data){
			if(data.status==0){
				alert("ojbk");
			}else{
				alert("gg");
			}
		}); */
		
	});
	
</script>

</html>